<!--
 * @author: Kate-sy
 * @create: 2021-06-23 15:41 PM
 * @license: MIT
 * @lastAuthor: Spring
 * @lastEditTime: 2021-06-29 20:56 PM
 * @desc: 
-->
<template>
  <div class="inteo-conter">
    <div class="inteo-wrap">
      <img
        src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/home.e8f8c43.png"
        alt=""
      />
      <div class="inteo-desc">
        <article>下载掘金客户端</article>
        <section>一个帮助开发者成长的社区</section>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Intro",
};
</script>
<style lang="scss" scoped>
.inteo-conter {
  transition: all 0.3s linear;
  width: 240px;
  background-color: #fff;
  box-shadow: 0 4px 3px -3px rgb(230, 230, 230);
  .inteo-wrap {
    padding: 12px;
    @include flex(space-between);
    img {
      width: 50px;
      height: 50px;
    }
    .inteo-desc {
      flex-wrap: wrap;
      flex-direction: column;
      @include flex(space-between,center,column);
      margin-left: 15px;
      height: 50px;
      article {
        @include font(14px, #1d2129);
      }
      section {
        @include font(12px, #86909c);
      }
    }
  }
}
</style>